<template lang="pug">
    .report
      .title 我的审阅记录
      table
        tr
          - var ths = ' 审批信息 上报时间 审批时间 当前状况 处置建议 审批人 操作'.split(' ')
          each i in ths
            th= i
        tr(v-for='(item,index) in list' :key='index')
          td {{index+1}}
          td(@click="getdetail(item)")
            div.subtitle(v-html="filterTitle(item.popularfeelingsTitle)")
          td {{item.createTime}}
          td {{item.approveTime}}
          td {{popularfeelingsStatus[item.popularfeelingsStatus]}}
          td {{item.popularfeelingsOpinion}}
          td {{item.approveName}}
          td.edit 
            el-button.btn(@click="changeapprove(item)") 审批
      .pagination
        el-pagination(
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[100, 80, 50, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total")
      .popup(v-if="showapprove")
        .body
          .p-title 舆情审阅
          .cont 确定要审阅这条舆情吗
          .suggest
            .name 处置建议:
            input(type="text" placeholder="请输入处置建议" v-model="suggest" maxlength="10")
          .choose
            el-button(type="primary" @click="checkApprove()") 保存
            el-button(@click="showapprove = false") 取消
          .close(@click="showapprove = false")
      .popup(v-if="approverr")
        .body
          .p-title 舆情审阅
          .cont.bom 对不起,您的这条舆情已经被审批过了
          .choose
            el-button(type="primary" @click="approverr = false") 知道了~
          .close(@click="approverr = false")

          
</template>
<script>
let popularfeelingsStatus ={1:'领导已审阅',0:'未审阅'}
export default {
  name:'approval',
  data(){
    return{
      currentPage1:1,
      total:0,
      pageSize:30,
      list:[],
      lsitem:[],
      showapprove:false,
      suggest:'',
      popularfeelingsStatus,
      approverr:false
    }
  },
  mounted(){
    this.query()
  },
  filters:{
    filterTitle(item){
      let value 
      if(item.length>15){
        value =  item.substring(0,15)+'...'
      }else{
        value =  item
      }
      return value.replace(/<br\/>/g, '').replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
    }
  },
  methods:{
    async query(){
      let res = await this.$http.post('vrv-monitor-platform-web/popularfeelingsDispose/query',{
        pageNum:this.currentPage1,
        pageSize:this.pageSize
      })
      if(res.body.success == true){
        this.list = res.body.data
        this.total = res.body.total
        this.pageSize = res.body.size
      }
    },
    changeapprove(item){
      if(item.popularfeelingsStatus == 1){
        this.approverr = true 
        return 
      }
      this.lsitem = item
      this.showapprove = true
    },
    async checkApprove(){
      if(!this.suggest){
        this.$message.error('请输入处置建议')
      }
      let res = await this.$http.post('vrv-monitor-platform-web/popularfeelingsDispose/checkApprove',{
        popularfeelingsId:this.lsitem.popularfeelingsId,
        popularfeelingsopinion:this.suggest
      })
      if(res.body.success == true){
        this.$message.success('审批成功')
        this.showapprove = false
        this.suggest = ''
        this.query()
      }
      
    },
    handleSizeChange(val) {
			this.pageSize = val
      this.query()
		},
    handleCurrentChange(val){
      this.currentPage1 = val
      this.query()
    },
    getdetail(item){
      this.$store.dispatch('queryarticle',{
        id:item.popularfeelingsId,
      });
    },
    filterTitle(item){
      return item.replace(/<br\/>/g, '').replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
    },
  }
}
</script>
<style lang="stylus" scoped>
  .report
    min-height 100%
    background #fff
    padding 8px 0
    margin-right: 1.7rem;
    .title
      height 60px
      margin 0 30px
      line-height 60px
      font-size 21px
      color #555
      font-weight bold
      border-bottom 1px solid #dcdcdc
    table  
      width 100%
      border-collapse collapse
      th  
        height 55px
        text-align center
        font-size 14px
        color #535353
        border-bottom 1px solid #dcdcdc
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
      td  
        height 60px
        font-size 14px 
        color #000
        text-align center
        border-bottom 1px solid #dcdcdc
        &.edit
          border-left 1px solid #dcdcdc
        &:nth-child(-n+2)
          padding-left 50px
          text-align left 
          cursor pointer
        .subtitle
          margin 0 auto
          width 120px
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
        .btn
          width 100px
          height 40px
    .pagination
      padding 20px
      text-align right 
.popup
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0,0.5)
  .body
    position absolute
    top 50%
    left 50%
    margin-top -120px
    margin-left -190px
    width 380px
    height 240px
    background #fff
    .p-title
      height 60px
      text-indent  26px
      font-size 18px
      color #666666
      padding 0
      line-height 60px
      border-bottom 1px solid rgba(231, 232, 232, 1);
    .cont
      padding 25px 48px 0
      text-align center
      font-size 14px
      color  #333333
      &.bom
        margin-bottom 65px
    .suggest
      padding 15px 48px
      font-size 0
      .name
        display inline-block
        vertical-align top
        width 95px
        font-size 14px
        line-height 35px
        color #666666
      input 
        display inline-block
        width 180px
        height 35px
        background-color rgba(255, 255, 255, 1)
        border-radius 5px 5px 5px 5px
        border solid 1px rgba(220, 220, 220, 1)
        font-size 14px
        line-height 35px
        color #333333
        padding 0 13px
        box-sizing border-box
    .choose
      padding 0 48px
      text-align right 
      >div
        box-sizing border-box
        width 100px
        height 40px
        border-radius 5px 5px 5px 5px
        font-size 18px
        color #ffffff
        line-height 40px
        display inline-block
        cursor pointer
        &.save
          background-color rgba(2, 103, 207, 1)
          margin-right 40px
        &.know
          background-color rgba(2, 103, 207, 1)
        &.cancel
          background-color rgba(235, 97, 0, 1)
    .close
      position absolute
      right 22px
      top 19px
      width 17px
      height 17px
      background url('img/close.png') no-repeat
      background-size cover 
      cursor pointer


</style>


